﻿<md-card>

    <a ng-if="alert.data.articles[0].image.src" ng-click="alert.gotoAlert()">
        <img alt="{{alert.data.shop.name}}" ng-src-cache="{{alert.data.articles[0].image.src | mediaScreen}}">
    </a>

    <md-card-content>

        <div layout layout-align="start center" layout-fill>
            
            <div>
                <a ng-click="alert.gotoShop()">
                    <img ng-src-cache="{{alert.data.shop.picto.src | mediaScreen}}" alt="{{alert.data.shop.name}}">
                </a>
            </div>

            <div>
                <md-icon ng-if="!alert.data.read" md-svg-src="/assets/icons/yellow/angle-double-right.svg" class="md-medium"></md-icon>
                <md-icon ng-if="alert.data.read" md-svg-src="/assets/icons/grey/angle-double-right.svg" class="md-medium"></md-icon>
            </div>

            <div layout="column" layout-fill>

                <div layout layout-align="start center">
                    <md-button ng-click="alert.gotoShop()" aria-label="Alert" flex text-left class="md-accent alert-item-title">
                        <strong>{{alert.data.shop.name}}</strong><span hide-sm>@{{alert.data.shop.login}}</span>
                    </md-button>            
            
                    <div ng-if="alert.data.distance" layout>
                        <md-icon md-svg-src="/assets/icons/grey/map-marker.svg" class="md-small"></md-icon>
                        <span>{{alert.data.distance}}</span>
                    </div>

                </div>

                <div layout layout-wrap>
                    
                    <md-button ng-href="#search/{{alert.data.shop.category.name}}" aria-label="Category" class="md-accent md-hue-1 md-small">
                        <span>{{alert.data.shop.category.name}}</span>
                    </md-button>

                    <md-button ng-href="#search/{{alert.data.type.name}}" aria-label="Type" class="md-warn md-hue-2 md-small">
                        <span>{{alert.data.type.name}}</span>
                    </md-button>
                </div>

            </div>
        </div>
        
        <div layout layout-align="start center" vmargin>
            <a ng-click="alert.gotoAlert()" ng-bind-html="alert.data.articles[0].content | linkify" class="nolink"></a>
        </div>

        <div layout layout-wrap layout-align="end end">
            
            <md-button ng-if="alert.data.shop.location.neighborhood" ng-href="#search/{{alert.data.shop.location.neighborhood}}" aria-label="Neighborhood" class="md-primary md-hue-2 md-small">
                <span>{{alert.data.shop.location.neighborhood}}</span>
            </md-button>

            <md-button ng-href="#search/{{alert.data.shop.category.name}}" aria-label="Category" class="md-primary md-hue-2 md-small">
                <span>{{alert.data.shop.category.name}}</span>
            </md-button>
            
            <md-button ng-href="#search/{{alert.data.shop.location.city}}" aria-label="City" class="md-primary md-hue-2 md-small">
                <span>{{alert.data.shop.location.city}}</span>
            </md-button>

        </div>

    </md-card-content>
</md-card>